<template>
  <a-drawer :maskClosable="true" width="650" placement="right" :destroyOnClose="true" :closable="false" @close="close"
    :visible="visible" style="overflow: auto; padding-bottom: 53px;height:100%;">
    <div style="position:fixed;right:10px;z-index:100;margin-right: 40px;">
      <a-button style="margin-right: 0.8rem" @click="close">关闭</a-button>
      <a-button @click="handleOk" type="primary" :loading="confirmLoading">保存</a-button>
    </div>
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="zhuangxiu" :rules="validatorRules" style="margin-top: 20px;">
        <div class="topTop"></div>
        <a-tabs type="card" :active-key="activeKey" @change="callback">
          <a-tab-pane key="1" tab="首页">
            <div class="bgcdiv" style="margin-top:50px">
              <span class="title">背景底图</span>
              <div style="margin-top: 10px"></div>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="首页背景底图"
                prop="inviterBackgroundImage">
                <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="1"
                  @fileChange="bjfileChange" v-model="zhuangxiu.inviterBackgroundImage" :fileSize="2"></JImageUpload>
                <div class="picDiv">建议尺寸宽度750px，上传2M以内jpg、png格式图片</div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="首页背景色号"
                prop="inviterBackgroundColor">
                <a-input placeholder="请输入背景色号" style="width: 160px; float: left"
                  v-model="zhuangxiu.inviterBackgroundColor" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviterBackgroundColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="首页卡片底图" prop="inviterCardImage">
                <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="1"
                  @fileChange="kpbjfileChange" v-model="zhuangxiu.inviterCardImage" :fileSize="2"></JImageUpload>
                <div class="picDiv">建议尺寸宽度750px，上传2M以内jpg、png格式图片</div>
              </a-form-model-item>
            </div>
            <div class="bgcdiv">
              <span class="title">宣传标语</span>
              <div style="margin-top: 10px"></div>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图标上传" prop="sloganImage">
                <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="1"
                  @fileChange="xcfileChange" v-model="zhuangxiu.sloganImage" :fileSize="2"></JImageUpload>
                <div class="picDiv">建议尺寸宽度32px，上传2M以内jpg、png格式图片</div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="底色" prop="sloganBackgroundColor">
                <a-input placeholder="请输入底色" v-model="zhuangxiu.sloganBackgroundColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.sloganBackgroundColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="边框" prop="sloganFrameColor">
                <a-input placeholder="请输入边框" v-model="zhuangxiu.sloganFrameColor" style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.sloganFrameColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="宣传标语文字色号" prop="sloganTextColor">
                <a-input placeholder="请输入宣传标语文字色号" v-model="zhuangxiu.sloganTextColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.sloganTextColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内容" prop="sloganContent">
                <a-textarea v-model="zhuangxiu.sloganContent" placeholder="请输入内容" :rows="3" maxlength="60" />
                <div class="xianzhi">限制60字以内</div>
              </a-form-model-item>
            </div>
            <div class="bgcdiv">
              <span class="title">按钮/文字色号</span>
              <div style="margin-top: 10px"></div>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="'规则'文字色号"
                prop="inviterRuleTextColor">
                <a-input placeholder="请输入'规则'文字色号" v-model="zhuangxiu.inviterRuleTextColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviterRuleTextColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="赠送额度文字色号"
                prop="inviterNumTextColor">
                <a-input placeholder="请输入'规则'文字色号" v-model="zhuangxiu.inviterNumTextColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviterNumTextColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标题文字色号"
                prop="inviterTitleTextColor">
                <a-input placeholder="请输入标题文字色号" v-model="zhuangxiu.inviterTitleTextColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviterTitleTextColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="按钮文字色号"
                prop="inviterButtonTextColor">
                <a-input placeholder="请输入按钮文字色号" v-model="zhuangxiu.inviterButtonTextColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviterButtonTextColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="按钮色号" prop="inviterButtonColor">
                <a-input placeholder="请输入按钮色号" v-model="zhuangxiu.inviterButtonColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviterButtonColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="落地页">
            <div class="bgcdiv" style="margin-top:50px">
              <span class="title">背景底图</span>
              <div style="margin-top: 10px"></div>
              <a-form-model-item :labelCol="labelColbj" :wrapperCol="wrapperCol" label="落地页背景底图"
                prop="inviteeBackgroundImage">
                <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="1"
                  @fileChange="ldbjfileChange" v-model="zhuangxiu.inviteeBackgroundImage" :fileSize="2">
                </JImageUpload>
                <div class="picDiv">建议尺寸宽度750px，上传2M以内jpg、png格式图片</div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelColbj" :wrapperCol="wrapperCol" label="落地页背景色号"
                prop="inviteeBackgroundColor">
                <a-input placeholder="请输入背景色号" style="width: 160px; float: left"
                  v-model="zhuangxiu.inviteeBackgroundColor" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviteeBackgroundColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelColbj" :wrapperCol="wrapperCol" label="落地页卡片底图"
                prop="inviteeCardImage">
                <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="1"
                  @fileChange="ldkpbjfileChange" v-model="zhuangxiu.inviteeCardImage" :fileSize="2"></JImageUpload>
                <div class="picDiv">建议尺寸宽度750px，上传2M以内jpg、png格式图片</div>
              </a-form-model-item>
            </div>
            <div class="bgcdiv">
              <span class="title">按钮/文字色号</span>
              <div style="margin-top: 10px"></div>
              <a-form-model-item :labelCol="labelColbj" :wrapperCol="wrapperCol" label="标题文字色号"
                prop="inviteeTitleTextColor">
                <a-input placeholder="请输入标题文字色号" v-model="zhuangxiu.inviteeTitleTextColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviteeTitleTextColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelColbj" :wrapperCol="wrapperCol" label="有效期文字色号"
                prop="inviteeValidTextColor">
                <a-input placeholder="请输入按钮文字色号" v-model="zhuangxiu.inviteeValidTextColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviteeValidTextColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelColbj" :wrapperCol="wrapperCol" label="按钮文字色号"
                prop="inviteeButtonTextColor">
                <a-input placeholder="请输入按钮文字色号" v-model="zhuangxiu.inviteeButtonTextColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviteeButtonTextColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelColbj" :wrapperCol="wrapperCol" label="按钮色号" prop="inviteeButtonColor">
                <a-input placeholder="请输入按钮色号" v-model="zhuangxiu.inviteeButtonColor"
                  style="width: 160px; float: left" />
                <div style="float: left; margin-left: 10px">
                  <colorPicker v-model="zhuangxiu.inviteeButtonColor" @change="headleChangeColor" />
                </div>
              </a-form-model-item>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="品牌卡样式">
            <div class="bgcdiv" style="margin-top:50px">
              <span class="title">品牌卡样式</span>
              <div style="margin-top: 10px"></div>
              <div style="margin: 10px 0px 8px 20px;font-size: 12px;color: #999999FF;">首页、落地页通用</div>
              <a-form-model-item :labelCol="labelColkp" :wrapperCol="wrapperCol" label="会员等级" prop="vipTypeId">
                <a-select v-model="zhuangxiu.vipTypeId" placeholder="会员等级" show-search
                  @change="vipTypeChange">
                  <a-select-option :value="item.id" v-for="item in leaveList" :key="item.id"> {{
                  item.name }} </a-select-option>
                </a-select>
              </a-form-model-item>
              <div v-for="item in imgList" :key="item.id">
                <a-form-model-item :labelCol="labelColkp" :wrapperCol="wrapperCol" :label="item.vipTyName + ':' "
                  prop="brandCardImage0">
                  <div class="imgEyes">
                    <img :src=item.imgUrl alt="" style="width:251.49px;height:105px">
                    <a-icon type="eye" style="width:251.49px;height:105px;line-height: 105px;" class="eyes"
                      @click="handlePreview(item.imgUrl)" />
                  </div>
                </a-form-model-item>
                <a-modal :visible="imgVisible" :footer="null" @cancel="handleCancel1()">
                  <img alt="example" style="width: 100%;margin-top:20px" :src="previewImage" />
                </a-modal>
              </div>
              <!-- <a-form-model-item :labelCol="labelColkp" :wrapperCol="wrapperCol" label="银卡" prop="brandCardImage0">
                <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="1"
                  @fileChange="ykfileChange" v-model="zhuangxiu.brandCardImage0" :fileSize="0.5"></JImageUpload>
                <div class="picDiv">建议尺寸宽度594px，上传2M以内jpg、png格式图片</div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelColkp" :wrapperCol="wrapperCol" label="金卡" prop="brandCardImage1">
                <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="1"
                  @fileChange="jkfileChange" v-model="zhuangxiu.brandCardImage1" :fileSize="0.5"></JImageUpload>
                <div class="picDiv">建议尺寸宽度594px，上传2M以内jpg、png格式图片</div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelColkp" :wrapperCol="wrapperCol" label="白金卡" prop="brandCardImage2">
                <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="1"
                  @fileChange="bjkfileChange" v-model="zhuangxiu.brandCardImage2" :fileSize="0.5"></JImageUpload>
                <div class="picDiv">建议尺寸宽度594px，上传2M以内jpg、png格式图片</div>
              </a-form-model-item>
              <a-form-model-item :labelCol="labelColkp" :wrapperCol="wrapperCol" label="铂金卡" prop="brandCardImage3">
                <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="1"
                  @fileChange="bojkfileChange" v-model="zhuangxiu.brandCardImage3" :fileSize="0.5"></JImageUpload>
                <div class="picDiv">建议尺寸宽度594px，上传2M以内jpg、png格式图片</div>
              </a-form-model-item> -->
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-form-model>
    </a-spin>
  </a-drawer>
</template>

<script>
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import { saveOrReleaseRenovationItem, vipTypeList, getRenovationItemVipTypeImage } from '@/api/marketingCenter/newmember'

import globalData from '@/assets/js/common'
export default {
  name: 'SysMessageModal',
  components: {
    JImageUpload
  },
  data() {
    let describe =  (rule, value, callback) => {
            callback()
    };
    return {
      previewImage: '',
      imgVisible: false,
      leaveList: [],
      imgList: [],
      activeKey:"0",
      zhuangxiu: {},
      validatorRules: {
        vipTypeId: [{ required: true, message: '请选择会员等级!', trigger: ['blur', 'change'] }],
        inviteeBackgroundImage: [{ required: true, message: '请上传图片!', trigger: ['blur', 'change'] }],
        inviterBackgroundImage: [{ required: true, message: '请上传图片!', trigger: ['blur', 'change'] }],
        inviterCardImage: [{ required: true, message: '请上传图片!', trigger: ['blur', 'change'] }],
        inviteeCardImage: [{ required: true, message: '请上传图片!', trigger: ['blur', 'change'] }],
        sloganImage: [{ required: true, message: '请上传图片!', trigger: ['blur', 'change'] }],
        brandCardImage0: [{ validator:describe,required: true}],
        brandCardImage1: [{ required: true, message: '请上传图片!', trigger: ['blur', 'change'] }],
        brandCardImage2: [{ required: true, message: '请上传图片!', trigger: ['blur', 'change'] }],
        brandCardImage3: [{ required: true, message: '请上传图片!', trigger: ['blur', 'change'] }],
        inviterBackgroundColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        inviteeValidTextColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        inviterNumTextColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        inviteeBackgroundColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        sloganBackgroundColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        sloganFrameColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        sloganTextColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        inviterRuleTextColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        inviterTitleTextColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        inviteeTitleTextColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        inviterButtonTextColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],//按钮文字色号
        inviteeButtonTextColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        inviterButtonColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],//按钮色号
        inviteeButtonColor: [{ required: true, message: '请选择色号!', trigger: 'blur' }],
        sloganContent: [{ required: true, message: '请输入内容!', trigger: 'blur' }]
      },
      productImage: '',
      fileList: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelColbj: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      labelColkp: {
        xs: { span: 24 },
        sm: { span: 5 }
      },

      confirmLoading: false,
      disableSubmit: true,
      newLifePhotos: []
    }
  },
  created() { },
  methods: {
    add() {
      this.edit({})
    },
    callback(key) {
      this.activeKey = key
      if (this.activeKey == 3) {
        this.getLeaveList();
      }
    },
    edit(record, type) {
      this.zhuangxiu = Object.assign({}, record)
      if (type == 'shouye') {
        this.activeKey = '1'
      } else if (type == 'luodi') {
        this.activeKey = '2'

      } else if (type == 'card') {
        this.getLeaveList();
        this.activeKey = '3'
      }
      // this.zhuangxiu=record


      this.$nextTick(() => {
        this.$refs.form.resetFields();
      })
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    // 预览
    handlePreview(file) {
      this.previewImage = file
      this.imgVisible = true
    },
    handleCancel1() {
      // this.close()
      this.imgVisible = false
    },
    vipTypeChange() {
      getRenovationItemVipTypeImage({ brandId: localStorage.getItem('decorationsBrandId',), vipTypeId: this.zhuangxiu.vipTypeId }).then(res => {
        this.imgList = res.data
      })
    },
    getLeaveList() {
      var that = this
      var id = localStorage.getItem('decorationsBrandId')
      vipTypeList({ brandId: id }).then(res => {
        if (res.success) {
          if (this.zhuangxiu.vipTypeId == '' || this.zhuangxiu.vipTypeId == -1) {
            this.zhuangxiu.vipTypeId = res.data[0].id
            // this.vipTypeChange()
          }
          this.vipTypeChange()
          this.leaveList = res.data
        } else {
          that.$message.warning(res.msg)
        }
      })
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          this.zhuangxiu.type = 0
          saveOrReleaseRenovationItem(this.zhuangxiu)
            .then(res => {
              if (res.success) {
                that.$message.success(res.msg)
                that.$emit('ok')
              } else {
                that.$message.warning(res.msg)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          that.$message.warning('请配置完整信息!')
          return false
        }
      })
    },
    headleChangeColor() { },
    // 首页背景上传图片
    bjfileChange(list) {
      this.newLifePhotos = list
      if (list.length != 0) {
        this.zhuangxiu.inviterBackgroundImage = list[0].url
      } else {
        this.zhuangxiu.inviterBackgroundImage = ''
      }
    },
    // 落地页背景上传图片
    ldbjfileChange(list) {
      this.newLifePhotos = list
      if (list.length != 0) {
        this.zhuangxiu.inviteeBackgroundImage = list[0].url
      } else {
        this.zhuangxiu.inviteeBackgroundImage = ''
      }
    },
    // 首页卡片底图上传图片
    kpbjfileChange(list) {
      this.newLifePhotos = list
      if (list.length != 0) {
        this.zhuangxiu.inviterCardImage = list[0].url
      } else {
        this.zhuangxiu.inviterCardImage = ''
      }
    },
    // 落地页卡片底图上传图片
    ldkpbjfileChange(list) {
      this.newLifePhotos = list
      if (list.length != 0) {
        this.zhuangxiu.inviteeCardImage = list[0].url
      } else {
        this.zhuangxiu.inviteeCardImage = ''
      }
    },
    // 宣传上传图片
    xcfileChange(list) {
      this.newLifePhotos = list
      if (list.length != 0) {
        this.zhuangxiu.sloganImage = list[0].url
      } else {
        this.zhuangxiu.sloganImage = ''
      }
    },
    // // 银卡上传图片
    // ykfileChange(list) {
    //   this.newLifePhotos = list
    //   if (list.length != 0) {
    //     this.zhuangxiu.brandCardImage0 = list[0].url
    //   } else {
    //     this.zhuangxiu.brandCardImage0 = ''
    //   }
    // },
    // // 金卡上传图片
    // jkfileChange(list) {
    //   this.newLifePhotos = list
    //   if (list.length != 0) {
    //     this.zhuangxiu.brandCardImage1 = list[0].url
    //   } else {
    //     this.zhuangxiu.brandCardImage1 = ''
    //   }
    // },
    // // 白金卡上传图片
    // bjkfileChange(list) {
    //   this.newLifePhotos = list
    //   if (list.length != 0) {
    //     this.zhuangxiu.brandCardImage2 = list[0].url
    //   } else {
    //     this.zhuangxiu.brandCardImage2 = ''
    //   }
    // },
    // // 铂金卡上传图片
    // bojkfileChange(list) {
    //   this.newLifePhotos = list
    //   if (list.length != 0) {
    //     this.zhuangxiu.brandCardImage3 = list[0].url
    //   } else {
    //     this.zhuangxiu.brandCardImage3 = ''
    //   }
    // },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },

    handleCancel() {
      this.close()
    },
  }
}
</script>

<style scoped lang="less">
/deep/.m-colorPicker .box.open{
  z-index: 999;
}
/deep/.ant-tabs-bar{
  position: fixed;
  background-color: #fff;
  height: 50px;
  width: 610px;
  z-index:99;
  margin-top: 20px;
  top:0px;
}
.imgEyes {
  position: relative;
}

.eyes {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0px;
  top: 0px;
  display: none;
  color: #fff;
}

.imgEyes:hover .eyes {
  display: block;
  z-index: 1;
}

.topTop {
  background-color: #fff;
  height:70px;
  position: fixed;
  top: 0;
  width:610px;
  z-index: 1;

}
/deep/.m-colorPicker .colorBtn {
  width: 49px !important;
  height: 32px !important;
  z-index: 99;
}

.tabDiv {
  border: 1px solid #d9d9d9;
  height: 32px;
  line-height: 32px;
  padding: 0px 15px;
}

.picDiv {
  margin-top: -24px;
  color: #999999;
  font-size: 14px;
}

.thumbnail {
  width: 100px;
  height: 100px;
}

.title {
  color: #303133;
  font-size: 16px;
  font-weight: 800;
  border-bottom: 4px solid #1890ff;
  margin-left: 20px;
  margin-bottom: 20px;
}

.bgcdiv {
  background-color: #f4f5f7;
  margin-top: 20px;
  padding: 20px 0px 1px;
}

.xianzhi {
  color: #999999;
  font-size: 14px;
}
</style>